<template>
  <div>
    <h1>v-model 是如何实现的，语法糖实际是什么？</h1>
    <input v-model="val" />
    <button @click="query">查看</button>
    <h1>-------------- 等同于 --------------</h1>
    <input :value="val2" @input="inputEvent" />

    <h1>-------------- 场景:作用在组件上 --------------</h1>
    <!-- <Child :childVal="val" /> -->
    <!-- <Child v-model="val" @input="val = $event" /> -->
    <Child v-model="val" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import Child from './components/Child.vue'

const val = ref('')
const val2 = ref('')

const query = () => {
  console.log(val.value, '查询', val2.value)
}

const inputEvent = (e: any) => {
  val2.value = e.target.value
}
</script>

<style scoped></style>
